<template>
	<div class="tool">
		<!-- 诊所描述Card -->
		<div class="inCard">
			<el-tabs type="border-card">
			  <el-tab-pane label="生成试图">
				  <div class="main">
					  <!-- 分左右 -->
					  <div class="left">
					  	<div class="a">
							  <div class="top">
								<span>用户：</span>
								<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-key" v-model="searchValue" :disabled="disabled"></el-input>
								<span style="margin-left: 8px;">模型：</span>
								<el-select v-model="selectValue" placeholder="R" size="mini">
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								  </el-option>
								</el-select>
							  </div>
							  <div class="aa">
							  	<span>试图父表：</span>
							  	<el-select v-model="tableValue" placeholder="" size="mini">
							  		<el-option
							  		  v-for="item in tables"
							  		  :key="item.value"
							  		  :label="item.label"
							  		  :value="item.value">
							  		</el-option>
							  	  </el-select>
							  </div>
							  <div class="table">
								  <el-table :data="tableData" border style="width: 368px;">
								  	<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
								  	<!-- fixed -->
								  	<el-table-column fixed="left" label="行号" type="index"></el-table-column>
								  	<!-- edit -->
								  	<el-table-column fixed="right" label="操作" width="148">
								  	      <template slot-scope="scope">
								  			  <div class="editbox" style="text-align: center;">
								  				<el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
								  				<el-button type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
								  			  </div>
								  	      </template>
								  	</el-table-column>
								  </el-table>
							  </div>
							  <div class="table">
							  <el-table :data="tableData" border style="width: 368px;">
								<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
								<!-- fixed -->
								<el-table-column fixed="left" label="行号" type="index"></el-table-column>
								<!-- edit -->
								<el-table-column fixed="right" label="操作" width="148">
									  <template slot-scope="scope">
										  <div class="editbox" style="text-align: center;">
											<el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
											<el-button type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
										  </div>
									  </template>
								</el-table-column>
							  </el-table>
							  </div>
						</div>
						
					  </div>
					  <div class="right">
					  	<!-- btn3 -->
							<div class="main-icon-c">
								<el-button style="margin: 4px;" plain v-for="(v,i) in headerBtn" :key="i" :type="v.type" size="mini">{{ v.title }}</el-button>
							</div>
							<div class="empty">
								
							</div>
					  </div>
				  </div>
			  </el-tab-pane>
			  <el-tab-pane label="修改视图">
				  <div class="main2">
				  <!-- 分左右 -->
				  <div class="left2">
					<div class="a2">
						  <div class="top2">
							<span>用户：</span>
							<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-key" v-model="searchValue" :disabled="disabled"></el-input>
							<span style="margin-left: 8px;">筛选：</span>
							<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-key" v-model="searchValue"></el-input>
							<el-button style="margin-left: 12px;" type="primary" size="mini" plain>读取</el-button>
						  </div>
						  <div class="table2">
							  <el-table :data="tableData" border style="width: 368px;">
								<el-table-column v-for="(col, inx) in tableRows2" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
								<!-- fixed -->
								<el-table-column fixed="left" label="行号" type="index"></el-table-column>
								<!-- edit -->
								<el-table-column fixed="right" label="操作" width="148">
									  <template slot-scope="scope">
										  <div class="editbox" style="text-align: center;">
											<el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
											<el-button type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
										  </div>
									  </template>
								</el-table-column>
							  </el-table>
						  </div>
						  
					</div>
				  </div>
				  <div class="right2">
				  	<!-- btn3 -->
					<div class="empty2">
						<el-button style="margin-left: 12px;" type="primary" size="mini" plain>保存修改</el-button>
					</div>
				  </div>
				  </div>
			  </el-tab-pane>
			</el-tabs>
		</div>
	
	</div>
</template>

<script>
	// selfs / sons
	// import StagTable from '../../external/comment/StagTable.vue'
	export default {
		components: {
			
		},
		data() {
			return {
				//str
				searchValue:'ORAHIP_T5',
				tableValue:'',
				selectValue:'',
				disabled:true,
				//arr
				options:[{ id:1,label:'R',value:'R'},{ id:2,label:'D',value:'D'},{ id:3,label:'B',value:'B'}],
				tables:[
					{ id:1,label:'VC_D危急值主表',value:'VC_D危急值主表'},{ id:2,label:'VC_T推送模板',value:'VC_T推送模板'},
					{ id:3,label:'VC_T推送模板关联表',value:'VC_T推送模板关联表'},{ id:4,label:'WIN_D排队显示列表',value:'WIN_D排队显示列表'},
				],
				// title右侧按钮
				tableRows:[
					{ name:"关联字段", prop:"code", type:""},{ name:"关联表名称", prop:"name", type:"" },
				],
				tableRows2:[
					{ name:"试图名称", prop:"code", type:""}
				],
				tableData: [],
				// title右侧按钮
				headerBtn:[
				 { add:"add", title:"组织试图", type:"primary"},{ add:"add", title:"保存试图", type:"primary" },
				 { add:"add", title:"保存序列", type:"primary" },{ add:"add", title:"生成XML", type:"primary" },{ add:"add", title:"保存XML", type:"primary" },
				 { add:"add", title:"创建PROC", type:"primary" },{ add:"add", title:"存储过程XML测试", type:"primary" },{ add:"add", title:"更新序列当前值", type:"primary" },
				 { add:"add", title:"项目实施工具", type:"primary" },{ add:"add", title:"大数据特殊处理", type:"primary" },{ add:"add", title:"智疗版数据导入", type:"primary" },
				 { add:"add", title:"跨医院数据导入", type:"primary" },{ add:"add", title:"系统单据编号管理", type:"primary" },{ add:"add", title:"导出存储过程", type:"primary" },
				 { add:"add", title:"更改文件字符集", type:"primary" },{ add:"add", title:"更新指定序列", type:"primary" },{ add:"add", title:"业务试图交叉统计", type:"primary" },
				 { add:"add", title:"存储过程交叉统计", type:"primary" },{ add:"add", title:"打印格式交叉统计", type:"primary" },{ add:"add", title:"报表SQL交叉统计", type:"primary" },
				 { add:"add", title:"测试", type:"primary"},{ add:"add", title:"产品标识设置", type:"primary" },
				],
			}
		},

		methods: {

			// tables
			// col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
			    let prop = col.prop,lab = col.lab;
			    let width = 80; // 设定一个最小值
			    let maxlenStr = ""; // 最长字符串
			    for (let info of list) {
			        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			    }
			    width = Math.max(width, len(lab), len(maxlenStr));
			    // 表格自带的内边距(20px) 自调
			    return width + 22; // 这里加了 12px
			    function len(str) {
			    // 实际分配长度可根据需要自行调整
			    let length = 8;
				for (const char of str + "") {
			        // 英文小写字符 8px
			        if ("a" <= char && char <= "z") length += 8;
			        // 英文大写字符 8px
			        else if ("A" <= char && char <= "Z") length += 8;
			        // 中文字符 28px
			        else if (char >= "\u4e00" && char <= "\u9fa5") length += 92;
			        // 其他 8px
			        else length += 12;
			    }
			        return length;
			    }
			},

		},

		//生命周期
		created() {
			
		},

	}
</script>

<style lang="less" scoped>
	/deep/ .el-table{
		font-size: 12px;
		margin-top: 12px;
	}
.tool{
	width: 100%;
	height: 300%;
	.inCard{
		width: 100%;
		height: 100%;
		.main{
			display: flex;
			.left{
				flex: 1;
				padding: 12px;
				background-color: #f8f8f8;
				.a{
					// display: flex;
					.top{
						display: flex;
						span{
							display: inline-block;
							width: 88px;
							line-height: 28px;
							font-size: 12px;
							color: red;
						}
					}
					.aa{
						display: flex;
						margin-top: 12px;
						span{
							display: inline-block;
							width: 88px;
							line-height: 28px;
							font-size: 12px;
							color: red;
						}
					}
				}
			}
			.right{
				flex: 4;
				margin-left: 8px;
				.empty{
					width: 100%;
					height: 288px;
					margin: 4px;
					border: 1px solid #8b8b8b;
				}
			}
		}
		.main2{
			display: flex;
			.left2{
				flex: 1;
				padding: 12px;
				background-color: #f8f8f8;
				.a2{
					// display: flex;
					.top2{
						display: flex;
						span{
							display: inline-block;
							width: 128px;
							line-height: 28px;
							font-size: 12px;
							color: red;
						}
					}
					.aa2{
						display: flex;
						margin-top: 12px;
						span{
							display: inline-block;
							width: 88px;
							line-height: 28px;
							font-size: 12px;
							color: red;
						}
					}
				}
			}
			.right2{
				flex: 4;
				margin-left: 8px;
				.empty2{
					width: 100%;
					height: 288px;
					margin: 4px;
					padding: 8px;
					border: 1px solid #f8f8f8;
				}
			}
		}
	}
}
</style>